@white:rgba(255,255,255,1);
@light:#f8f8f8;
@gray:rgba(0, 0, 0, 0.26);
@darkgray:rgb(86,86,86);
@dark:rgba(51,51,51,1);
@red:#f44336;
@blue:rgba(54,117,246,1);
@green:rgba(1,62,116,1);
@greenlight:rgba(31,127,162,1);
@orange:#ff9100;

// less module
:export {
  white:@white;
  light:@light;
  gray:@gray;
  darkgray:@darkgray;
  dark:@dark;
  red:@red;
  blue:@blue;
  green:@green;
  greenlight:@greenlight;
  orange:@orange;
}

// color
.white{color:@white};
.light{color:@light};
.gray{color:@gray};
.darkgray{color:@darkgray};
.dark{color:@dark};
.red{color:@red};
.blue{color:@blue};
.green{color:@green};
.greenlight{color:@greenlight};
.orange{color:@orange};

.link{color:#004a96;cursor:pointer;}
.iconbig{width:2.8rem;height:2.8rem;font-size:2.8rem;display: inline-block;}
.iconmedium{width:1.8rem;height:1.8rem;font-size:1.8rem;display: inline-block;}
.image{width:100%;height:100%;background-position: center;background-size: cover;background-repeat: no-repeat;}
.backgroundColor{background-color:@light;}
.row_pd1{padding:1rem 0;}
.row_pd2{padding:2rem 0;}

/* flex */
.fl-middle{
  display: box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -moz-box;
  display: -webkit-box;
  display: flex;
  align-items: center;
}
.fl-bottom{
  display: box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -moz-box;
  display: -webkit-box;
  display: flex;
  align-items: flex-end;
}
.fl-center{
  display: box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -moz-box;
  display: -webkit-box;
  display: flex;
  /* 09版 */
  -webkit-box-pack: center;
  /* 12版 */
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  align-items: center;
}
.fl-right{
  display: box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -moz-box;
  display: -webkit-box;
  display: flex;
  justify-content: flex-end;
}
.fl{display:flex !important;flex-direction: column;}
.flr{display:flex !important;flex-direction: row;}
.flone{flex-shrink: 0;}
.flbox{
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;
  flex:1;
  flex-grow: 1;box-sizing:border-box;-webkit-overflow-scrolling: touch;
}

/* pagination */
.pagination{
  margin-right:-5px;
  li{
    background: #F3F5F8;
    border-radius: 2px;
    margin: 0 5px;
  }
  button{
    padding: 0;
    margin: 0;
    border-radius: 2px;
    font-family: SFProText-Medium, SFProText;
    font-weight: 500;
    color: #31323F;
  }
  .MuiPaginationItem-page.Mui-selected{
    color:white;
    background: #1989FA;
  }
  .MuiPaginationItem-page.Mui-selected:hover{
    background: #2896fa;
  }
}

/* carsousel */
.carsousel{
  position: relative;
  .item{
    width:100%;
    height:460px;
    min-height:300px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    img{
      width:100%;
    }
    .content{
      width: 100%;
      height: 90%;
      color: @white;
      position: absolute;
      top:0;
      .left{
        width:28rem;
      }
      .right{
        width:20rem;
        margin-left:4rem;
        img{
          width:100%;
        }
      }

      .title{
        font-size:1.6rem;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        padding:.8rem 0;
      }
      .sub{
        font-size:.9rem;
      }

    }
  }
  .step{
    width:100%;
    list-style:none;
    justify-content: center;
    position: absolute;
    bottom:0;display: flex;
    padding:0;
  }
  .step li{
    width: 10px;
    height: 10px;
    margin-left: 10px;
    border-radius: 5px;
    background: rgba(0,0,0,0);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor:pointer;
    transition:width .6s;
  }
  .step li.active{width: 60px;height: 10px;background: rgba(255, 255, 255, 0.7);border-radius: 5px;}
}

/* pannel */
.pannel-box{
  .pannel-header{margin:2rem 0 1rem;}
  .MuiPaper-root{min-height:280px;}
  p{font-size: 1rem;line-height: 30px;color: #666;}
}
.pannel_ad{
  display:flex;
  justify-content: center;
  overflow:hidden;
  position:relative;

  >div:first-child{
    width: 100%;
    height:100%;
    position: absolute;
    display:flex;
    align-items: center;
    //text-shadow: 0 0 5px rgb(0,0,0,40%);
  }
}

/* step */
.line_show{
  .icon{width:50px;height:50px;border-radius: 25px;color:@orange;border: 2px solid @orange;font-weight:600;}
  .MuiStep-root{min-width:100px;flex:inherit;}

  &.abled{
    .MuiStep-root{
      cursor:pointer;
    }
    .MuiStep-root:hover{
      .icon{
        color:@white;
        background-color:@orange;
      }
      .MuiStepLabel-label{
        color:@orange;
      }
    }
  }
}

/* popover */
.pop_menu{
  pointer-events:none;
  [aria-hidden]{
    display:none;
  }
  .MuiPopover-paper{
    width:110px;
    padding:.3rem 1.5rem;
    border-top:6px solid #FFCEA1;
    border-radius: 0;
    pointer-events:all;
  }
  .item{
    margin:.5rem 0;
    font-weight: bold;
  }
  .item_button{
    font-weight: normal;
    //padding-left:1rem;
    //padding-right:1rem;
  }
  .active button{
    color:@blue;
  }

  &.noborder{
    .MuiPopover-paper{
      width:240px;
      border:none !important;

      .search_box{
        padding-top: 0.55rem;
        padding-bottom: 0.6rem;
        input{
          width:90%;
          height:24px;
          margin-top: 1px;
        }
      }
    }
  }
}

.pop_dialog{
  .item{
    padding:.3rem .6rem;
  }
}

// drawer
.drawer_menu{
  >div{
    padding:0 2.5rem;
  }
  .MuiListSubheader-root{
    background-color:white;
  }
}




[mobile]{
  .carsousel{
    .item{
      height:490px;
    }
    .content{
      flex-direction: column-reverse;
      text-align: center;
    }
  }
}
